<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>题目</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="/layui/layui.all.js"></script>
</head>
<body>

<div class="ui  container">
    <div  class="ui secondary segment form">
        <input id="paperid" type="hidden"  th:value="${paperId}">
        <input type="hidden" name="page">
        <div class="six fields">
            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui  compact  teal basic label">类型</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="type"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">类型</div>
                        <div class="menu">
                            <div class="item" data-value="选择题">选择题</div>
                            <div class="item" data-value="判断题">判断题</div>
                            <div class="item" data-value="填空题">填空题</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui  compact  teal basic label">章节</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="chapterId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">章节</div>
                        <div class="menu">
                            <div  th:each="chapter : ${chapters}"  class="item"  data-value="1" th:data-value="${chapter.id}" th:text="${chapter.chapterNum}">错误日志</div>
                            <!--                            <div class="item" data-value="1">第一章</div>-->
                            <!--                            <div class="item" data-value="2">第二章</div>-->
                        </div>
                    </div>
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui  compact  teal basic label">难度</div>
                    <div class="ui fluid selection  dropdown ">
                        <input type="hidden" name="diffcult"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">难度</div>
                        <div class="menu">
                            <div class="item" data-value="1"><div class="ui disable star rating" data-rating="1" data-max-rating="1"></div></div>
                            <div class="item" data-value="2"><div class="ui disable star rating" data-rating="2" data-max-rating="2"></div></div>
                            <div class="item" data-value="3"><div class="ui disable star rating" data-rating="3" data-max-rating="3"></div></div>
                            <div class="item" data-value="4"><div class="ui disable star rating" data-rating="4" data-max-rating="4"></div></div>
                            <div class="item" data-value="5"><div class="ui disable star rating" data-rating="5" data-max-rating="5"></div></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui compact  teal basic label">创建人</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="teacherId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">创建人</div>
                        <div class="menu">
                            <div  th:each="teacher : ${teachers}"  class="item"  data-value="1" th:data-value="${teacher.id}" th:text="${teacher.name}">错误日志</div>
                            <!--                            <div class="item" data-value="1">刘老师</div>-->
                            <!--                            <div class="item" data-value="2">张老师</div>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class=" required field">
                <div class="ui left labeled action  input">
                    <div class="ui   compact  teal basic label">知识点</div>
                    <div class="ui fluid selection   dropdown ">
                        <input type="hidden" name="pointId"  >
                        <i class="dropdown icon"></i>
                        <div class=" default text ">知识点</div>
                        <div class="menu">
                            <div  th:each="point : ${points}"  class="item"  data-value="1" th:data-value="${point.id}" th:text="${point.name}">错误日志</div>
                            <!--                            <div class="item" data-value="1">数组</div>-->
                            <!--                            <div class="item" data-value="2">数论</div>-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="field">
                <button  id ="clear-btn" class="ui  button">清空</button>
                <button type="button" id="search-btn" class="ui  orange basic button"><i class="search icon"></i>搜索</button>
            </div>
        </div>
    </div>
    <div id="table-container">
        <table class="ui celled compact teal table" th:fragment="questionList">
            <thead>
            <tr>
                <th>
                    <div class="ui checkbox">
                        <input name="selectall" type="checkbox"  >
                        <label>全选</label>
                    </div>
                </th>
                <th>序号</th>
                <th>ID</th>
                <th>类型</th>
                <th>难度</th>
                <th>章节</th>
                <th>知识点</th>
                <th>分数</th>
                <th>创建人</th>
                <th>内容</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="question,iterStat : ${page.content}">
                <td>
                    <div class="ui checkbox">
                        <input type="checkbox" name="checkboxquestionid"  th:value="${question.id}"> <label></label>
                    </div>
                </td>
                <td th:text="${iterStat.count}">1</td>
                <td th:text="${question.id}">124</td>
                <td th:text="${question.type}">选择题</td>
                <td ><div class="ui disable star rating" th:data-rating="${question.diffcult}" th:data-max-rating="${question.diffcult}"></div></td>
                <td th:text="${question.chapter.chapterNum}">第一章</td>
                <td ><div class="ui mini basic orange label" th:each="point : ${question.points}" th:text="${point.name}">数组</div></td>
                <td th:text="${question.score}">124</td>
                <td th:text="${question.teacher.name}">刘老师</td>
                <td th:text="${question.content}">  </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="10">
                    <div class="ui  mini  pagination menu" th:if="${page.totalPages}>1">
                        <a href="#" onclick="page(this)" th:attr="data-page=${page.number}-1" class=" item" th:unless="${page.first}">上一页</a>
                        <a href="#" onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a>
                    </div>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>

    <div class="ui padded segment">
        <div class="ui grid">
            <form id="questiosform" class="ui form" th:action="@{/teacher/tea-question/{paperid}/addtopaper(paperid=${paperId})}" th:object="${paperquestions}" method="post">
                <input  id="pid" type="hidden" name="pid" th:value="${paperId}" >
                <input id="qids" name="qids" type="hidden" >
            </form>
        </div>
        <button id="addquestios" class="ui orange right floated  basic button" onclick="">添加</button>
    </div>


</div>

<section>
    <script type="text/javascript">
        $('.ui.dropdown').dropdown({
            on: 'hover'
        });

        $('#clear-btn')
            .on('click', function() {
                $('.ui.selection.dropdown')
                    .dropdown('clear');
            });

        $("#search-btn").click(function () {
            $("[name='page']").val(0);
            loaddata($("#paperid").val());
        });

        function page(obj) {
            $("[name='page']").val($(obj).data("page"));
            loaddata($("#paperid").val());
        };
        function loaddata(paperid) {
            $("#table-container").load(/*[[@{/teacher//tea-paper-question/search}]]*/"/teacher/"+paperid+"/tea-paper-question/search",{
                type : $("[name='type']").val(),
                pointId : $("[name='pointId']").val(),
                chapterId : $("[name='chapterId']").val(),
                teacherId : $("[name='teacherId']").val(),
                diffcult : $("[name='diffcult']").val(),
                page : $("[name='page']").val()
            });
        };

        function f(idd){
            var text1 ='#t'+idd;
            layer.open({
                    type: 1,
                    title: '题目详情',
                    area: ['600px', '360px'],
                    shadeClose: true, //点击遮罩关闭
                    content: $(text1).val(),
                }
            );
        };

        function getquestionids(){
            var checkboxis="";
            $("input:checkbox[name='checkboxquestionid']:checked").each(function(){
                checkboxis+=$(this).val()+',';
            });
            return checkboxis;
        };

        $("#addquestios").click(function(){
            var checkboxids=getquestionids();
            var frm = $("#questiosform");
            $("#qids").val(checkboxids);
            frm.submit();
            return false;
        });

        $('input[name="selectall"]').on("click",function(){
            if($(this).is(':checked')){
                $('input[name="checkboxquestionid"]').each(function(){
                    $(this).prop("checked",true);
                });
            }else{
                $('input[name="checkboxquestionid"]').each(function(){
                    $(this).prop("checked",false);
                });
            }
        });

        $('.ui.rating')
            .rating('disable');

    </script>
</section>
</body>
</html>